<script setup>
// 获取屏幕边界到安全区域距离
import { ref, defineEmits } from 'vue'
const { safeAreaInsets } = uni.getSystemInfoSync()
const keyword = ref()
const emit = defineEmits(['confirm'])
const confirm = () => {
  console.log(keyword.value)
  emit('confirm', keyword.value)
}
</script>

<template>
  <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <!-- logo文字 -->
    <view class="search-countainer">
      <!-- 情况1：已登录 -->
      <view class="overview" v-if="false">
        <navigator url="/pagesMember/user-settings/user-settings" hover-class="none">
          <uv-avatar
            class="avatar"
            mode="aspectFill"
            src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/avatar_3.jpg"
          ></uv-avatar>
        </navigator>
      </view>
      <!-- 情况2：未登录 -->
      <view class="overview" v-else>
        <navigator url="/pages/login/login" hover-class="none">
          <uv-avatar
            class="avatar gray"
            mode="aspectFill"
            src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-06/db628d42-88a7-46e7-abb8-659448c33081.png"
          ></uv-avatar>
        </navigator>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
/* 自定义导航条 */
.navbar {
  background-image: url(https://crop-doctor.oss-cn-beijing.aliyuncs.com/wechat/background1.png);
  // background-color: #45d675;
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  .logo {
    display: flex;
    align-items: center;
    justify-content: center; /* 水平居中 */
    height: 64rpx;
    padding-left: 15rpx;
    padding-top: 20rpx;
    .logo-image {
      width: 200rpx;
      height: 60rpx;
    }
    .logo-text {
      flex: 1;
      line-height: 28rpx;
      color: #fff;
      margin: 2rpx 0 0 20rpx;
      padding-left: 20rpx;
      border-left: 1rpx solid #fff;
      font-size: 26rpx;
    }
  }
  .search-countainer {
    align-items: center;
    display: flex;
    .overview {
      margin-right: 10rpx;
      .avatar {
        padding: 20rpx;
        width: 100rpx;
        height: 100rpx;
      }
    }
  }
}
</style>
